<!--vuetify-->
<template>
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer" fixed app>
      <v-list dense>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>home</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Home</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>contact_mail</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Contact</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar color="indigo" dark fixed app>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-toolbar>
    <v-content>
      <button @click="httpApi">http请求非代理</button>
      <button @click="httpApi2">http请求用代理</button>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>
          <v-flex text-xs-center>
            <v-tooltip left>
              <v-btn slot="activator" :href="source" icon large target="_blank">
                <v-icon large>code</v-icon>
              </v-btn>
              <span>Source</span>
            </v-tooltip>
            <v-tooltip right>
              <v-btn
                slot="activator"
                icon
                large
                href="https://codepen.io/johnjleider/pen/rJdVMq"
                target="_blank"
              >
                <v-icon large>mdi-codepen</v-icon>
              </v-btn>
              <span>Codepen</span>
            </v-tooltip>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer color="indigo" app>
      <span class="white--text">&copy; {{year}}</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    drawer: null,
    year: 2018
  }),
  props: {
    source: String
  },
  methods: {
    httpApi() {
      //get请求
      this.$HTTP.api({
        url: "https://api.foodpaket.com/api/v1/web/cities",
        method: "GET",
        successCallback: function(result) {
          console.log("ch15w", JSON.stringify(result));
        }.bind(this)
      });
      //post请求
      //   this.HTTP.api({
      //     url: "/msg/myMsg",
      //     method: "POST",
      //     emulateJSON: true,
      //     params: {
      //       msgType: 0
      //     },
      //     successCallback: function(result) {
      //       // console.log('/msg/myMsg',JSON.stringify(result));
      //     }.bind(this)
      //   });
    },
    httpApi2() {
      //get请求
      this.$HTTP.api({
        url: "/myjson/bins/ch15w",
        method: "GET",
        successCallback: function(result) {
          console.log("用代理", JSON.stringify(result));
        }.bind(this)
      });
    }
  }
};
// myjson有跨域问题，用proxyTable代理吧
</script>
<style lang="less" scoped>
</style>
